<template>
  <div class="user-blog">
    <el-empty v-if="blogList.length === 0" description="暂无内容"></el-empty>
    <article-item v-for="item in blogList" :key="item.id" :blog="item" :delete-visible="true"
                  @deleteBlog="deleteBlog"></article-item>
    <pagination v-show="total>0" :total="total" :page.sync="blogVo.currentPage" :limit.sync="blogVo.pageSize"
                @pagination="getBlogList"/>
  </div>
</template>

<script>
import {blogList, deleteBlogById} from "@/api/blog";
import BlogShow from "@/views/blog/show";
import ArticleItem from "@/components/ArticleItem";
import Pagination from "@/components/Pagination";

export default {
  name: "blog",
  components: {Pagination, ArticleItem, BlogShow},
  data() {
    return {
      blogList: [],
      blogVo: {
        userId: this.$store.getters.user.id,
        currentPage: 1,
        pageSize: 10,
      },
      total: 0
    }
  },
  methods: {
    getBlogList() {
      blogList(this.blogVo).then(response => {
        const {data} = response.data
        this.blogList = data.list
        this.blogVo.currentPage = data.pageNum
        this.total = data.total
        console.log(data)
      })
    },
    deleteBlog(blogId) {
      deleteBlogById(blogId).then(response =>{
        if(response.data.code === 20000){
          this.$notify({
            title: 'Success',
            message: 'Delete Successfully',
            type: 'success',
            duration: 2000
          })
          this.getBlogList()
        }
      })
    },
  },
  computed: {
    user() {
      return this.$store.getters.user
    }
  },
  created() {
    this.getBlogList()
  }
}
</script>

<style scoped>

</style>
